@import "base";
//slideshow
li{
    list-style: none;
}
.jlg_slideshow{  
    position: relative;  
    .listtotal{
        position: relative;
        width: 1190px;
        height: 564px;
        margin: 0 auto;
        .list{
            z-index: 999999999;
            position: absolute;
            width: 190px;
            height:480px ;
            .hufu,.fuzhuang,.shipin,.jiaju,.jiadian,.baojian,.fangchan,.dajiaju{
                .list_list1{
                    width: 715px;
                    height: 564px;
                    font-size: 12px;
                    background: white;
                    opacity: 0.8;
                    position: absolute;
                    top: 0;
                    left: 190px;
                    display: none;
                    span{
                        width: 715px;
                        display: block;
                        float: left;
                        margin: 10px;
                    }                   
                }
            }
            .hufu:hover .list_list1{
                display: block;
            }
            .fuzhuang:hover .list_list1{
                display: block;
            }
            .shipin:hover .list_list1{
                display: block;
            }
            .jiaju:hover .list_list1{
                display: block;
            }
            .jiadian:hover .list_list1{
                display: block;
            }
            .baojian:hover .list_list1{
                display: block;
            }
            .fangchan:hover .list_list1{
                display: block;
            }
            .dajiaju:hover .list_list1{
                display: block;
            }
            div{                
                background: rgb(59,44,51);
                height: 62px;
                width: 190px;
                h4{
                    margin-left: 15px;
                    a{
                        width: 190px;
                        height: 30px;
                        line-height: 30px;
                        color: white;
                        margin-top: 5px;
                    }
                }
                span{
                    width: 190px;
                    a:nth-child(1){
                        margin-left: 15px;
                    }
                    a{
                       margin-right:3px ;
                       color: white;
                       font-size: 12px;
                    }
                }
            }
            div:nth-child(6){
                padding-top: 5px;
            }
        }
        .listright{
            z-index: 9999999999999;
            width: 190px;
            height: 562px;
            float: right;
            background: white;
            margin-top: 2px;
            position: relative;
            .online{
                position: absolute;
                top: 0;
                left: 0;
                width: 190px;
                height: 40px;
                text-align: center;
                color: rgb(234,24,81);
                line-height: 40px;
                background: white;
            }
            .time{
                position: absolute;
                top: 60px;
                left: 0;
                width: 190px;
                height: 20px;
                text-align: center;
                line-height: 20px;
            }
            .onlineImg{
                width: 160px;
                height: 170px;
                position: absolute;
                top: 100px;
                left: 0;
            }
            .jieshao{
                width: 190px; 
                height: 40px;
                position: absolute;
                top: 300px;
                left: 0;
                text-align: center;
                line-height: 40px;
                font-size: 14px;
                a{
                    color: rgb(77,76,75);
                }                             
            }
            .jieshao a:hover{
                color: rgb(221,29,92);
            }
            .price{
                width: 190px; 
                height: 30px;
                position: absolute;
                top: 330px;
                left: 0;
                text-align: center;
                line-height: 30px;
                color: rgb(221,29,92);
            }
            .blank{
                width: 160px;
                height: 60px;
                position: absolute;
                top: 350px;
                right: 0;
                border-bottom: 1px solid lightgray;
            }
            .onlinetext{
                width: 190px;
                height: 40px;
                text-align: center;
                color: rgb(234,24,81);
                line-height: 40px;
                position: absolute;
                bottom: 100px;
                left: 0;
            }
            .onlinetext1{
                width: 190px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                color: black;
                font-size:12px ;
                position: absolute;
                bottom: -50px;
                left: 0;
            }
            .onlinetext2{
                width: 190px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                color: black;
                font-size:12px ;
                position: absolute;
                bottom: -70px;
                left: 0;
            }
        }
    }
        .jlg_slideshow_top_list{
          height: 34px;
            li{
                height: 34px;
                position: relative;
                a{
                    color: rgb(68,68,68);
                    display: block;
                    height: 34px;
                    text-align: center;
                    line-height: 34px;
                    text-decoration: none;
                }
                span{
                    font-size: 14px;
                    color: rgb(207,204,213);
                    position: absolute;
                    top: 9px;
                    right: 0px;
                }
            }
            li:nth-child(1){
                a{
                  color: rgb(233,20,86);
                    width: 100px;
                }
            }
            li:nth-child(2),li:nth-child(3),li:nth-child(4){
                a{
                    width: 100px;
                }
                span{
                    right: -6px;
                }
            }
            
        }
        .line{
            height: 34px;
            position: absolute;
            top: 0;
            right: 180px;
            line-height: 34px;
            span:nth-child(1){
                font-size: 12px;
                margin-right: 6px;
            }
            span:nth-child(2){
                font-size: 12px;
                b{
                     color: rgb(233,20,86);
                }
               
            }
        }
}
//轮播图
.jlg_slideshow_pics{
    width: 100%;
    height: 563px;
    position: relative;
    img{
        width: 100%;
        height: 562px;
        position: absolute;
    }
    ol{
        position: absolute;
        left: 700px;
        bottom: 0px;
    }
}
.circles{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: black;
    z-index: 99999999;
    float: left;
    position: absolute;
    text-align: center;
    line-height: 20px;
    color: white;
}
.circles:nth-child(2){
    left: 30px;
}
.circles:nth-child(3){
    left: 60px;
}
.circles:nth-child(4){
    left: 90px;
}
.circles:nth-child(5){
    left: 120px;
}
//商品列表
.jlg_list_top{
    width: 1190px;
    height: 54px;
    margin: 0 auto;
    .jlg_list_top_l,.jlg_list_top_r{
        width: 85px;
        height: 50px;
        float: left;
        margin-right: 20px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        a{
            text-decoration: none;
            color: black;
        }
    }
    .jlg_list_top_l{
        a{
            color: rgb(233,20,86);
        }       
    }
}
.jlg_list_mid{
    width: 1190px;
    height: 330px;
    margin: 0 auto;
    
    .midl{
        width: 190px;
        height: 330px;
        float: left;
    }
    .midslideshow_box{
        width: 998px;
        height: 330px;
        overflow: hidden;
        position: relative;
        .btnl{
                width: 30px;
                height: 50px;
                line-height: 50px;
                background: rgb(190,190,190);
                position: absolute;
                top: 140px;
                left: 17px;
                z-index: 9999999;
                text-align: center;
                color: white;
                cursor: pointer;
                display: none;
            }
            .btnr{
                width: 30px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background: rgb(190,190,190);
                position: absolute;
                top: 140px;
                right: 3px;
                z-index: 9999999;
                color: white;
                cursor: pointer;
                display: none;
            }            
    .midslideshow{
        width: 3992px;
        height: 330px; 
        position: absolute;
        top: 0; 
        left: 0;
        .imgWrap1{
            position: relative;
            width: 998px;
            height: 330px; 
            float: left;            
            div{
                width: 230px;
                height: 330px;
                float: left;
                margin-left:17px ;
                border: 1px solid rgb(248,248,248);
                position: relative;
            }
            div:hover{
                border-color: rgb(232,232,232);
            }
            div{
                p{
                    width: 230px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    color: rgb(233,20,86);
                    margin: 5px auto;
                }
                .warpimg1{
                    width: 230px;
                    height: 230px;
                    img{
                       width: 230px;
                       height: 230px; 
                    }
                }
                .warpjieshao1{
                    width: 230px;
                    height: 40px;
                    line-height: 40px;
                    a{
                        font-size: 14px;
                        float: left;
                        color: black;
                    }
                }
                .warpjieshao1 a:hover{
                    color: rgb(233,20,86);
                }
                .warpprice1{
                    width: 230px;
                    height: 20px;
                    text-align: left;
                    position: absolute;
                    bottom: 5px;
                    left: 0;
                }
            }
        }
        .imgWrap2{
            position: relative;
            width: 998px;
            height: 330px; 
            float: left;            
            div{
                width: 230px;
                height: 330px;
                float: left;
                margin-left:17px ;
                border: 1px solid rgb(248,248,248);
                position: relative;
            }
            div:hover{
                border-color: rgb(232,232,232);
            }
            div{
                p{
                    width: 230px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    color: rgb(233,20,86);
                    margin: 5px auto;
                }
                .warpimg2{
                    width: 230px;
                    height: 230px;
                    img{
                       width: 230px;
                       height: 230px; 
                    }
                }
                .warpjieshao2{
                    width: 230px;
                    height: 40px;
                    line-height: 40px;
                    a{
                        font-size: 14px;
                        float: left;
                        color: black;
                    }
                }
                .warpjieshao2 a:hover{
                    color: rgb(233,20,86);
                }
                .warpprice2{
                    width: 230px;
                    height: 20px;
                    text-align: left;
                    position: absolute;
                    bottom: 5px;
                    left: 0;
                }
            }
        }
        .imgWrap3{
            position: relative;
            width: 998px;
            height: 330px; 
            float: left;
            
            div{
                width: 230px;
                height: 330px;
                float: left;
                margin-left:17px ;
                border: 1px solid rgb(248,248,248);
                position: relative;
            }
            div:hover{
                border-color: rgb(232,232,232);
            }
            div{
                p{
                    width: 230px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    color: rgb(233,20,86);
                    margin: 5px auto;
                }
                .warpimg3{
                    width: 230px;
                    height: 230px;
                    img{
                       width: 230px;
                       height: 230px; 
                    }
                }
                .warpjieshao3{
                    width: 230px;
                    height: 40px;
                    line-height: 40px;
                    a{
                        font-size: 14px;
                        float: left;
                        color: black;
                    }
                }
                .warpjieshao3 a:hover{
                    color: rgb(233,20,86);
                }
                .warpprice3{
                    width: 230px;
                    height: 20px;
                    text-align: left;
                    position: absolute;
                    bottom: 5px;
                    left: 0;
                }
            }
        }
        .imgWrap4{
            position: relative;
            width: 998px;
            height: 330px; 
            float: left;
            
            div{
                width: 230px;
                height: 330px;
                float: left;
                margin-left:17px ;
                border: 1px solid rgb(248,248,248);
                position: relative;
            }
            div:hover{
                border-color: rgb(232,232,232);
            }
            div{
                p{
                    width: 230px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    color: rgb(233,20,86);
                    margin: 5px auto;
                }
                .warpimg4{
                    width: 230px;
                    height: 230px;
                    img{
                       width: 230px;
                       height: 230px; 
                    }
                }
                .warpjieshao4{
                    width: 230px;
                    height: 40px;
                    line-height: 40px;
                    a{
                        font-size: 14px;
                        float: left;
                        color: black;
                    }
                }
                .warpjieshao4 a:hover{
                    color: rgb(233,20,86);
                }
                .warpprice4{
                    width: 230px;
                    height: 20px;
                    text-align: left;
                    position: absolute;
                    bottom: 5px;
                    left: 0;
                }
            }
        }
    }
    }
    .midslideshow_box:hover .btnl{
        display: block;
    }
    .midslideshow_box:hover .btnr{
        display: block;
    }
}
//商品列表中
.jlg_list_middle{
    height: 385px;
    .midtext{
        width: 1190px;
        height: 50px;
        text-align: left;
        line-height: 50px;
        margin: 0 auto;
    }
    .midtotal{
        width: 1190px;
        height: 330px;
        margin: 0 auto;
        .midleft{
            width: 190px;
            height: 330px;
            float: left;
            img{
                width: 190px;
                height: 330px;
            }
        }
        .imgWrap5{
            width: 998px;
            height: 330px; 
            float: left;        
            div{
                width: 230px;
                height: 330px;
                float: left;
                margin-left:17px ;
                border: 1px solid rgb(248,248,248);
                position: relative;
            }
            div:hover{
                border-color: rgb(232,232,232);
            }
            div{
                p{
                    width: 230px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    color: rgb(233,20,86);
                    margin: 5px auto;
                }
                .warpimg5{
                    width: 230px;
                    height: 230px;
                    img{
                       width: 230px;
                       height: 230px; 
                    }
                }
                .warpjieshao5{
                    width: 230px;
                    height: 40px;
                    line-height: 40px;
                    a{
                        font-size: 14px;
                        float: left;
                        color: black;
                    }
                }
                .warpjieshao5 a:hover{
                    color: rgb(233,20,86);
                }
                .warpprice5{
                    width: 230px;
                    height: 20px;
                    text-align: left;
                    position: absolute;
                    bottom: 30px;
                    left: 0;
                }
                .infor{
                    width: 230px;
                    height: 20px;
                    text-align: right;
                    position: absolute;
                    bottom: 10px;
                }
            }
        }
    }
    
}
//商品列表下
.bottext{
    width: 1190px;
    height: 52px;
    margin: 0 auto;
    line-height: 52px;
    position: relative;
    .bottexts{
        position: absolute;
        top: 0px;
        font-size: 18px;
        left: 50px;
        a{
            color: black;
        }       
    }
    .bottexts a:hover{
        color: rgb(233,20,86);
    }
    p{
        img{
            margin-top: 10px;
        }
    }
}
.jlg_list_bottom1{
    width: 1190px;
    height: 520px;
    position: relative;
    margin: 0 auto;
    .listbox{
        width: 190px;
        height: 120px;
        background: rgb(253,244,247);
        position: absolute;
        top: 0;
        left: 0;
        li{
            width: 57.75px;
            height: 40px;
            float: left;
            margin-left: 5px;
            margin-top: 3px;
            a{
                color: black;
                font-size: 12px;
            }
        }
        li a:hover{
            color: rgb(233,20,86);
        }
    }
    .listboximg{
        width: 190px;
        height: 390px;
        position: absolute;
        top: 130px;
    }
    .listboxmid{
        width: 386px;
        height: 520px;
        position: absolute;
        top: 0;
        left: 190px;
    }
    .listboxright{
        width: 614px;
        height: 520px;
        position: absolute;
        top: 0;
        right: 0;
        div{
            border: 1px solid rgb(248,248,248);
            width: 177px;
            height: 259.6px;
            margin-left: 25px;
            float: left;
            position: relative;
            img{
                width: 167px;
                height: 167px;
                position: absolute;
                top: 5px;
                left: 5px;
            }
            .warpjieshao6,.warpjieshao7,.warpjieshao8,.warpjieshao9{
                width: 167px;
                position: absolute;
                bottom: 40px;
                left: 5px;
                a{
                    color: rgb(68,133,133);
                    font-size: 12px;
                }
            }
            .warpjieshao6,.warpjieshao7,.warpjieshao8,.warpjieshao9 a:hover{
                color: rgb(233,20,86);
            }
            .warpprice6,.warpprice7,.warpprice8,.warpprice9{
                width: 167px;
                position: absolute;
                bottom: 10px;
                left: 5px;
                color: rgb(233,20,86);
            }
        }
        div:hover{
            border-color: rgb(232,232,232);
        }
    }
}

